<template>
  <div>
    <el-row>
      <!--       头像 -->
          <el-col :span="2" :offset="21">
            <el-button @click="userManage()" circle>
              <img src="../assets/default-avatar.png" style="height: 40px;border-radius: 50%"/>
            </el-button>
            <el-divider></el-divider>
          </el-col>
      <el-col :span="18" :offset="3">
        <!-- 新建按钮 -->
        <div class="table-grid-content">
          <el-button
            type="primary"
            @click="addWork()"
          >新增</el-button>
        </div>
        <br>
        <!-- 表格 -->
        <div class="Table-table">
  <el-table :data="tableData" border style="width: 100%"
            empty-text="暂无申请作品"
            :cell-style="rowClass"
            :header-cell-style="headClass">
      <el-table-column
        prop="title"
        label="题目"
        width="200">
      </el-table-column>
      <el-table-column
        prop="loginName"
        label="姓名"
        width="230"
        sortable>
      </el-table-column>
      <el-table-column
        prop="adminType"
        label="类别"
        width="150"
        sortable>
      </el-table-column>
      <el-table-column
        :formatter="formatPstatus"
        label="状态"
        width="100"
        sortable>
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="最新提交/修改时间"
        width="200"
        sortable>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="250">
        <!-- 操作按钮 -->
        <template v-slot="scope">
          <el-button v-if="scope.row.pstatus == 1"
            size="mini"
            @click="handleEdVi(scope.row)"
          >查看</el-button>
          <el-button v-if="scope.row.pstatus == 1&&beforeDeadline"
                     size="mini"
            @click="handleWithdraw(scope.row)"
          >撤回</el-button>
          <el-button v-if="scope.row.pstatus == 0"
                     size="mini"
                     @click="handleEdVi(scope.row)"
          >修改</el-button>
          <el-button v-if="beforeDeadline"
                       size="mini" ype="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
        <el-pagination
          layout="prev, pager, next"
          :total="total">
        </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'List',
  data () {
    return {
      tableData: [],
      total: 0,
      beforeDeadline: true,
      deadline: 20230304,
      userId: '1'
    }
  },
  methods: {
    // 建表
    buildList () {
      this.$axios.get('/baseInfo/list').then(res => {
        let result = res.data.data
        this.total = result.total
        var record
        // 过滤掉过期的行
        if (!this.beforeDeadline) {
          record = result.records.filter(item => item.pstatus !== '0')
        } else record = result.records
        this.tableData = record
      }).catch((err) => {
        console.log(err)
      })
    },
    // 点击右上角头像用户管理
    userManage () {
      this.$router.push({path: '/userManage', query: {id: this.userId}})
    },
    // 删除数据
    handleDelete (index, row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index, 1)
        let choiceUrl = '/' + row.choice + '/' + row.id
        this.$axios.delete(choiceUrl)
        let stampUrl = '/stamp/' + row.id
        this.$axios.delete(stampUrl)
        let baseUrl = '/baseInfo/' + row.id
        this.$axios.delete(baseUrl)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch((err) => {
        this.$message({
          type: 'error',
          message: err
        })
      })
    },
    // 撤回操作
    handleWithdraw (row) {
      let url = '/baseInfo/' + row.id
      this.$axios.put(url, {pstatus: '0'})
    },
    // 新建申请
    addWork () {
      this.$router.push({name: 'PortPage'})
    },
    // 查看和编辑功能
    handleEdVi (row) {
      // console.log('id: ' + row.id)
      this.$router.push({path: '/baseInfo', query: {id: row.id}})
    },
    // // 表头样式设置
    headClass () {
      return 'text-align: center;background:rgb(242,242,242);color:rgb(140,138,140)'
    },
    // 表格样式设置
    rowClass () {
      return 'text-align: center;'
    },
    // 刷新页面
    reloadPage () {
      this.$router.go(0)
    },
    // 时间函数,判断是否过期
    deadLine () {
      let year = new Date().getFullYear().toString()
      let mm = new Date().getMonth() + 1
      let month = ('0' + mm.toString()).slice(-2)
      let dd = new Date().getDate()
      let date = ('0' + dd.toString()).slice(-2)
      let ntime = year + month + date
      console.log(ntime)
      // deadline: 2023/3/4
      if (ntime > this.deadline) {
        this.beforeDeadline = false
      }
    },
    formatPstatus: function (row) {
      return row.pstatus === '1' ? '已提交' : '未提交'
    }
  },
  mounted () {
    this.deadLine()
    this.buildList()
  }
}
</script>

<style>
.el-dropdown-link {
  cursor: pointer;
}
</style>
